Page({

    /**
     * 页面的初始数据
     */
    data: {},

    methods: {},

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

        wx.createSelectorQuery()
            .select("#myCanvas")
            .fields({ node: true, size: true })
            .exec(res => {
                console.log(res);

                const canvas = res[0].node
                const ctx = canvas.getContext('2d')
                canvas.width = 300
                canvas.height = 300

                let img = canvas.createImage()
                this.drawImg(ctx, img, canvas)
            })
    },

    drawImg(ctx, img, canvas) {
        img.src = "https://cdn.nlark.com/yuque/0/2020/jpeg/1252071/1590847767698-f511e86d-f183-4f75-a04d-1b99cd9f0bd7.jpeg"
        img.onload = function () {
            console.log(img.width, img.height);

            // ctx.translate(30, 30)

            // ctx.drawImage(
            //     img, -img.width / 2, -img.height / 2,
            //     img.width,
            //     img.height
            // )
            ctx.drawImage(
                img, 0, 0,
                img.width,
                img.height
            )
            ctx.fillStyle = `rgba(0,0,0,0.3)`;
            // ctx.fillRect(-img.width / 2, -img.height / 2, img.width, img.height)
            ctx.fillRect(0, 0, img.width, img.height)
            wx.canvasToTempFilePath({
                x: img.width/2 - 30,
                y: img.height/2 - 30,
                width: 50,
                height: 50,
                destWidth: 500,
                destHeight: 500,
                // canvasId: 'myCanvas',
                canvas,
                fileType: 'png',
                quality: 1,
                success: (res) => {
                    console.log(res.tempFilePath);

                    wx.previewImage({
                        current: res.tempFilePath,
                        urls: [res.tempFilePath]
                    })

                }
                
            })


        }

    }
})